import React, { useState, Component, useEffect } from 'react'
import img from './assets/mouse1.jpg'


// Hook修改state
function App1() {
    const [state, setState] = useState(1)
    const changeState = () => {
        setState(state + 1)
    }
    return (
        <div>
            <h2>{state}</h2>
            <button onClick={changeState}>State</button>
        </div>
    )
}



// 修改多个state变量
function App2() {
    // 数值
    const [state, setState] = useState(2)
    // 字符串
    const [name, setName] = useState('Brave-Y')
    // 数组
    const [arr, setArr] = useState(['亚瑟', '妲己'])
    // 对象
    const [obj, setObj] = useState({ name: '武则天', id: 1 }, { name: '嬴政', id: 2 })
    // 修改数值
    const changeState = () => {
        setState(state + 1)
    }
    // 修改字符串
    const changeName = () => {
        setName('胖鸡')
    }
    // 修改数组
    const changeArr = () => {
        setArr('bug')
    }
    return (
        <div>
            <h2>{state}</h2>
            <h2>{name}</h2>
            <h2>{arr[1]}</h2>
            <h2>{obj.name}</h2>
            <button onClick={changeState}>修改State</button>
            <button onClick={changeName}>修改name</button>
            <button onClick={changeArr}>修改arr</button>
        </div>
    )
}



// 修改导航栏标题
// 1.类组件
class App3 extends Component {
    constructor() {
        super()
        this.state = {
            count: 1
        }
    }
    // 实现加 1 的方法
    addHandle = () => {
        this.setState({
            count: this.state.count + 1
        })
    }
    componentDidMount() {
        document.title = `count: ${this.state.count}`
    }
    componentDidUpdate() {
        document.title = `count: ${this.state.count}`
    }
    render() {
        const { count } = this.state
        return (
            <div>
                <p>{count}</p>
                <button onClick={this.addHandle}>加 1</button>
            </div>
        )
    }
}

// 2.Hook 写法
function App4() {
    const [state, setState] = useState(0)
    const changeState = () => {
        setState(state + 1)
    }
    useEffect(() => {
        document.title = `this.state=${state}`
    })
    return (
        <div>
            <h2>{state}</h2>
            <button onClick={changeState}>修改title</button>
        </div>
    )
}


// 类组件更新title属性
class App6 extends Component {
    constructor() {
        super()
        this.state = {
            state: 1
        }
    }
    componentDidMount() {
        document.title = `this.state.age=${this.state.state}`
        this.timerId = setTimeout(() => {
            console.log(1)
        })
    }
    componentDidUpdate() {
        document.title = `this.state.age=${this.state.state}`

    }
    componentWillUnmount() {
        clearInterval(this.timerId)
    }
    changeState = () => {
        this.setState({
            state: this.state.state + 1
        })
    }
    render() {
        const { state } = this.state
        return (
            <div>
                <h2>{state}</h2>
                <button onClick={this.changeState}>点击加一</button>
            </div>
        )
    }
}
class App7 extends Component {
    state = {
        isFlag: false
    }
    handel = () => {
        this.setState({
            isFlag: this.state.isFlag ? false : true
        })
    }
    render() {
        const { isFlag } = this.state
        return (
            <div>
                {isFlag ? <App6></App6> : ''}
                <h2>----------------------------------------------</h2>
                <button onClick={this.handel}>是否展示：{isFlag ? '是' : '否'}</button>
            </div>
        )
    }
}


// Hook写法
function App8() {
    const [state, setState] = useState(1)
    const changeState = () => {
        setState(state + 1)
    }
    useEffect(() => {
        document.title = `state=${state}`
        const timerId = setTimeout(() => {
            console.log(1)
        }, 1000);
        return clearInterval(timerId)
    })
    return (
        <div>
            <h2>{state}</h2>
            <button onClick={changeState}>修改button</button>
        </div>
    )
}
function App9() {
    const [isflag, setIsflag] = useState(false)
    const change = () => {
        setIsflag(isflag ? false : true)
    }
    return (
        <div>
            {isflag ? <App8></App8> : false}
            <h1>--------------------------------</h1>
            <button onClick={change}>是否展示：{isflag ? '是' : '否'}</button>
        </div>
    )
}



//自定义Hook--始终以use开头
// 封装复用的代码
function Mouse() {
    const [piont, setPiont] = useState({ x: 0, y: 0 })
    const handel = (e) => {
        // 新坐标点
        const newPiont = {
            x: e.clientX,
            y: e.clientY
        }
        setPiont(newPiont)
    }
    useEffect(() => {
        window.addEventListener('mousemove', handel)
        return function (obj) {
            window.removeEventListener('mousemove', handel)
        }
    })
    return piont

}
// 坐标组件
function Piont() {
    const mouse = Mouse()
    return (
        <div>
            <h2>{mouse.x} -- {mouse.y}</h2>
        </div>
    )
}

// 跟随鼠标移动的哈士奇
function CatMouse() {
    // 获取返回的数据
    const mouse = Mouse()
    return (
        <img src={img} style={{
            width: '100px',
            height: '100px',
            position: 'absolute',
            borderRadius: '50%',
            top: mouse.y - 50,
            left: mouse.x - 50
        }} alt="" />
    )
}

function App() {
    return (
        <div>
            <Piont></Piont>
            <CatMouse></CatMouse>
        </div>
    )
}


export default App